<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <button @click="num++">+</button>
        <q-cc :a="num" text="圣剑啊！你有看到那个敌人吗"></q-cc>
        <hr>
        <button @click="num1++">+</button>
        <q-aa :d="num1" text="吃"></q-aa>
    </div>
</body>
<script src="./vue.js"></script>
<script>
    const { createApp, ref ,computed} = Vue
    const app = createApp({
        setup() {
            let num = ref(0)
            let num1=ref(0)
            return {
                num,num1
            }
        }
    })
    app.component('q-cc', {
        props:{
            a:{
                type:[Number,String],
                required:true,
                validator(val){
        if(val <= 10){
            return true
        }
        throw new Error('你不认可？')
            return false
                }
            },
            text:String,
        },
        
setup(props) {
            let text = props.text;
            let a = computed(function() {
                return props.a
            })
            return {
                a, text
            }
        },
        template: `<div class="cc">
    {{a}}
    {{text}}
    </div>`
    })

    app.component('q-aa', {
        props:{
            d:{
                type:[Number,String],
                required:true,
                validator(val){
        if(val <= 10){
            return true
        }
        throw new Error('吃饱')
            return false
                }
            },
            text:String,
        },
        
setup(props) {
            let text = props.text;
            let d = computed(function() {
                return props.d
            })
            return {
                d, text
            }
        },
        template: `<div class="aa">
    {{d}}
    {{text}}
    </div>`
    })
    app.mount('#app')
</script>

</html>